<template>
  <div>
    <!-- 中间导航 breadcrumb-->
  <el-breadcrumb class="breadcrumb-container" separator="/">
    <el-breadcrumb-item :to="{ path: '/admin/restaurant' }">admin</el-breadcrumb-item>
    <el-breadcrumb-item>menu</el-breadcrumb-item>
  </el-breadcrumb>

  <!-- 选择餐馆的select -->
  <div class="restaurant-tags-container">
    <el-select v-model="value" filterable :filter-method="pinyingMatch" @change="getAllFood"
    placeholder="请选择">
      <el-option
        v-for="item in newShopName"
        :key="item.id"
        :label="item.name"
        :value="item.id">
      </el-option>
    </el-select>
  </div>

  <!-- 菜名的表格 -->
    <FoodName :id="id" @pageChange='handlePage' @sizeChange='handleSize' />

  </div>
</template>

<script>
import PinYinMatch from 'pinyin-match';
import _ from 'lodash';
import { mapState, mapActions } from 'vuex';
import FoodName from '@/views/admin/components/menu/components/FoodName.vue';

export default {
  components: { FoodName },
  data() {
    return {
      value: '',
      id: '',
      size: 10,
      page: 1,
    };
  },

  computed: {
    ...mapState({
      shopList: (state) => state.restaurant.list,
      newShopName: (state) => state.menu.pinyinSearch,
    }),

    shopName() {
      const shopListName = [];
      _.forEach(this.shopList, (element) => {
        shopListName.push({ name: _.get(element, "name['zh-CN']"), id: _.get(element, '_id') });
      });
      return shopListName;
    },

  },

  created() {
    this.getRestaurant();
  },

  methods: {
    ...mapActions([
      'getRestaurant',
      'getFood',
      'saveSendData',
      'modifyShopName',
      'clickShopName', // 点击的时候重新赋值完整的店名
    ]),

    getAllFood() {
      this.id = this.value;
      console.log('this.id: ', this.id);
      this.clickShopName();
      // console.log('this.label==>', v);
      // eslint-disable-next-line
      this.getFood({ id: this.id, page: this.page, limit: this.size, keyword:'' });// 发送请求获取所有的当前页面的食物
    },

    handlePage(v) {
      // console.log('page ==>', v); // v 就是传过来的值，不需要函数调用的时候再传值了
      this.page = v;
    },

    handleSize(v) {
      // console.log('size ==>', v);
      this.size = v;
    },

    //* 下拉框设置拼音模糊搜索
    pinyingMatch(value) {
      const shopListName = [];
      _.forEach(this.shopList, (element) => {
        shopListName.push({ name: element.name['zh-CN'], id: _.get(element, '_id') });
      });

      if (value) {
        const result = [];
        shopListName.forEach((item) => {
          // console.log(item);
          const matchResult = PinYinMatch.match(item.name, value);

          if (matchResult) {
            result.push(item);
          }
        });
        this.modifyShopName(result);
      } else {
        this.modifyShopName(shopListName);
      }
    },

  },

};
</script>

<style lang="scss" scoped>
 /deep/ .el-select .el-input {
    width : 250px;
    margin-left : 31px;
}

</style>
